//通过vue-router插件实现模板路由配置
import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
//创建路由器
const router = createRouter({
  //路由模式hash
  history: createWebHistory(),
  routes: [
    {
      //首页
      path: "/",
      component: () => import("@/views/home.vue"),
      redirect: "button",
      children: [
        //1.通用
        {
          //按钮
          name: "SurelyTable",
          path: "SurelyTable",
          component: () => import("@/views/SurelyTable/index.vue"),
        },
        {
          //按钮
          name: "SurelyForm",
          path: "SurelyForm",
          component: () => import("@/views/SurelyForm/index.vue"),
        },
        {
          //按钮
          name: "button",
          path: "button",
          component: () => import("@/views/button/index.vue"),
        },
        {
          //图标
          name: "icon",
          path: "icon",
          component: () => import("@/views/icon/index.vue"),
        },
        {
          //排版
          name: "typography",
          path: "typography",
          component: () => import("@/views/typography/index.vue"),
        },

        //2.布局
        {
          //分割线
          name: "divider",
          path: "divider",
          component: () => import("@/views/divider/index.vue"),
        },
        {
          //弹性布局
          name: "flex",
          path: "flex",
          component: () => import("@/views/flex/index.vue"),
        },
        {
          //栅格
          name: "grid",
          path: "grid",
          component: () => import("@/views/grid/index.vue"),
        },
        {
          //布局
          name: "layout",
          path: "layout",
          component: () => import("@/views/layout/index.vue"),
        },
        {
          //间距
          name: "space",
          path: "space",
          component: () => import("@/views/space/index.vue"),
        },

        //3.导航
        {
          name: "anchor",
          path: "anchor",
          component: () => import("@/views/anchor/index.vue"),
        },
        {
          name: "breadcrumb",
          path: "breadcrumb",
          component: () => import("@/views/breadcrumb/index.vue"),
        },
        {
          name: "dropdown",
          path: "dropdown",
          component: () => import("@/views/dropdown/index.vue"),
        },
        {
          name: "menu",
          path: "menu",
          component: () => import("@/views/menu/index.vue"),
        },
        {
          name: "pageheader",
          path: "pageheader",
          component: () => import("@/views/pageheader/index.vue"),
        },
        {
          name: "pagination",
          path: "pagination",
          component: () => import("@/views/pagination/index.vue"),
        },
        {
          name: "steps",
          path: "steps",
          component: () => import("@/views/steps/index.vue"),
        },

        //4.数据录入
        {
          name: "autocomplete",
          path: "autocomplete",
          component: () => import("@/views/autocomplete/index.vue"),
        },
        {
          name: "cascader",
          path: "cascader",
          component: () => import("@/views/cascader/index.vue"),
        },
        {
          name: "checkbox",
          path: "checkbox",
          component: () => import("@/views/checkbox/index.vue"),
        },
        {
          name: "datepicker",
          path: "datepicker",
          component: () => import("@/views/datepicker/index.vue"),
        },
        {
          name: "form",
          path: "form",
          component: () => import("@/views/form/index.vue"),
        },
        {
          name: "input",
          path: "input",
          component: () => import("@/views/input/index.vue"),
        },
        {
          name: "inputnumber",
          path: "inputnumber",
          component: () => import("@/views/inputnumber/index.vue"),
        },
        {
          name: "mentions",
          path: "mentions",
          component: () => import("@/views/mentions/index.vue"),
        },
        {
          name: "radio",
          path: "radio",
          component: () => import("@/views/radio/index.vue"),
        },
        {
          name: "rate",
          path: "rate",
          component: () => import("@/views/rate/index.vue"),
        },
        {
          name: "select",
          path: "select",
          component: () => import("@/views/select/index.vue"),
        },
        {
          name: "slider",
          path: "slider",
          component: () => import("@/views/slider/index.vue"),
        },
        {
          name: "switch",
          path: "switch",
          component: () => import("@/views/switch/index.vue"),
        },
        {
          name: "timepicker",
          path: "timepicker",
          component: () => import("@/views/timepicker/index.vue"),
        },
        {
          name: "transfer",
          path: "transfer",
          component: () => import("@/views/transfer/index.vue"),
        },
        {
          name: "treeselect",
          path: "treeselect",
          component: () => import("@/views/treeselect/index.vue"),
        },
        {
          name: "upload",
          path: "upload",
          component: () => import("@/views/upload/index.vue"),
        },
        {
          name: "avatar",
          path: "avatar",
          component: () => import("@/views/avatar/index.vue"),
        },
        {
          name: "badge",
          path: "badge",
          component: () => import("@/views/badge/index.vue"),
        },
        {
          name: "calendar",
          path: "calendar",
          component: () => import("@/views/calendar/index.vue"),
        },
        {
          name: "card",
          path: "card",
          component: () => import("@/views/card/index.vue"),
        },
        {
          name: "carousel",
          path: "carousel",
          component: () => import("@/views/carousel/index.vue"),
        },
        {
          name: "collapse",
          path: "collapse",
          component: () => import("@/views/collapse/index.vue"),
        },
        {
          name: "comment",
          path: "comment",
          component: () => import("@/views/comment/index.vue"),
        },
        {
          name: "descriptions",
          path: "descriptions",
          component: () => import("@/views/descriptions/index.vue"),
        },
        {
          name: "empty",
          path: "empty",
          component: () => import("@/views/empty/index.vue"),
        },
        {
          name: "image",
          path: "image",
          component: () => import("@/views/image/index.vue"),
        },
        {
          name: "list",
          path: "list",
          component: () => import("@/views/list/index.vue"),
        },
        {
          name: "popover",
          path: "popover",
          component: () => import("@/views/popover/index.vue"),
        },
        {
          name: "qrcode",
          path: "qrcode",
          component: () => import("@/views/qrcode/index.vue"),
        },
        {
          name: "segmented",
          path: "segmented",
          component: () => import("@/views/segmented/index.vue"),
        },
        {
          name: "statistic",
          path: "statistic",
          component: () => import("@/views/statistic/index.vue"),
        },
        {
          name: "table",
          path: "table",
          component: () => import("@/views/table/index.vue"),
        },
        {
          name: "tabs",
          path: "tabs",
          component: () => import("@/views/tabs/index.vue"),
        },
        {
          name: "tag",
          path: "tag",
          component: () => import("@/views/tag/index.vue"),
        },
        {
          name: "timeline",
          path: "timeline",
          component: () => import("@/views/timeline/index.vue"),
        },
        {
          name: "tooltip",
          path: "tooltip",
          component: () => import("@/views/tooltip/index.vue"),
        },
        {
          name: "tour",
          path: "tour",
          component: () => import("@/views/tour/index.vue"),
        },
        {
          name: "tree",
          path: "tree",
          component: () => import("@/views/tree/index.vue"),
        },
        {
          name: "alert",
          path: "alert",
          component: () => import("@/views/alert/index.vue"),
        },
        {
          name: "drawer",
          path: "drawer",
          component: () => import("@/views/drawer/index.vue"),
        },
        {
          name: "message",
          path: "message",
          component: () => import("@/views/message/index.vue"),
        },
        {
          name: "modal",
          path: "modal",
          component: () => import("@/views/modal/index.vue"),
        },
        {
          name: "notification",
          path: "notification",
          component: () => import("@/views/notification/index.vue"),
        },
        {
          name: "popconfirm",
          path: "popconfirm",
          component: () => import("@/views/popconfirm/index.vue"),
        },
        {
          name: "progress",
          path: "progress",
          component: () => import("@/views/progress/index.vue"),
        },
        {
          name: "result",
          path: "result",
          component: () => import("@/views/result/index.vue"),
        },
        {
          name: "skeleton",
          path: "skeleton",
          component: () => import("@/views/skeleton/index.vue"),
        },
        {
          name: "spin",
          path: "spin",
          component: () => import("@/views/spin/index.vue"),
        },
        {
          name: "configProvider",
          path: "configProvider",
          component: () => import("@/views/configProvider/index.vue"),
        },
        {
          name: "floatButton",
          path: "floatButton",
          component: () => import("@/views/floatButton/index.vue"),
        },
        {
          name: "watermark",
          path: "watermark",
          component: () => import("@/views/watermark/index.vue"),
        },
        {
          name: "app",
          path: "app",
          component: () => import("@/views/app/index.vue"),
        },

        //其他
        {
          name: "affix",
          path: "affix",
          component: () => import("@/views/affix/index.vue"),
        },
      ],
    },
  ],
  //滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    };
  },
});
export default router;
